<template>
    <div id="header">
        <div>
            <el-row align="center">
                <el-col :span="5" :offset="1">
                    <img src="../assets/images/img_1.png" style="height: 80px">
                </el-col>
                <!--                <el-col :span="6" style="padding-right: 0;margin-top: 15px" :offset="3">-->
                <!--                    <el-input placeholder="请输入内容"  style="width: 180px" v-model="searchInfo"/>-->
                <!--                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>-->
                <!--                </el-col>-->
                <el-col :span="5" :offset="5" style="height: 1px">
                </el-col>
                    <el-col :span="3" :offset="3" style="margin-top: 15px">
                        <el-avatar :src="url1" alt="user" shape="circle" fit="full"
                                   @error="true"></el-avatar>

                            <span style="position: absolute;margin-top: 10px">欢迎<span style="color: black">{{ this.$store.state.currentUser.username }}</span>登录!</span>

                    </el-col>
            </el-row>
        </div>

        <!--        导航栏-->
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#479082"
            text-color="#fff"
            router="router"
            style="text-align: center;justify-items: center;justify-content: center;horiz-align: center;width: 100%"
            active-text-color="#ffd04b">
            <el-menu-item index="3-1" class="menu" v-if="this.$store.state.currentUser.roleflag===1">
                <router-link :to="{path:'/3-1'}" style="text-decoration: none">首页</router-link>
            </el-menu-item>
            <el-menu-item index="3-3" class="menu" v-if="this.$store.state.currentUser.roleflag===2">
                <router-link :to="{path:'/3-3'}" style="text-decoration: none">首页</router-link>
            </el-menu-item>
            <el-menu-item index="3-3" class="menu" v-if="this.$store.state.currentUser.roleflag===3">
                <router-link :to="{path:'/3-3'}" style="text-decoration: none">首页</router-link>
            </el-menu-item>
            <el-menu-item index="1-3" class="menu" v-if="this.$store.state.currentUser.roleflag===1">
                <router-link :to="{path:'/1-3'}" style="text-decoration: none">检查费用管理</router-link>
            </el-menu-item>
            <el-menu-item index="1-4" class="menu" v-if="this.$store.state.currentUser.roleflag===1">
                <router-link :to="{path:'/1-4'}" style="text-decoration: none">药物费用管理</router-link>
            </el-menu-item>
            <el-menu-item index="5-1" class="menu" v-if="this.$store.state.currentUser.roleflag===1">
                <router-link :to="{path:'/5-1'}" style="text-decoration: none">医生排班</router-link>
            </el-menu-item>
            <el-menu-item index="7-1" class="menu" v-if="this.$store.state.currentUser.roleflag===2">
                <router-link :to="{path:'/7-1'}" style="text-decoration: none">患者信息</router-link>
            </el-menu-item>
            <el-menu-item index="7-2" class="menu" v-if="this.$store.state.currentUser.roleflag===2">
                <router-link :to="{path:'/7-2'}" style="text-decoration: none">门诊信息</router-link>
            </el-menu-item>
            <el-menu-item index="7-3" class="menu" v-if="this.$store.state.currentUser.roleflag===3">
                <router-link :to="{path:'/7-3'}" style="text-decoration: none">我的病例</router-link>
            </el-menu-item>
            <el-menu-item index="8" class="menu" v-if="this.$store.state.currentUser.roleflag===2">
                <router-link :to="{path:'/8'}" style="text-decoration: none">检查列表</router-link>
            </el-menu-item>
            <el-menu-item index="4-1" class="menu" v-if="this.$store.state.currentUser.roleflag===3">
                <router-link :to="{path:'/4-1'}" style="text-decoration: none">门诊预约</router-link>
            </el-menu-item>
            <el-menu-item index="5" class="menu" v-if="this.$store.state.currentUser.roleflag===2 || this.$store.state.currentUser.roleflag===3">
                <router-link :to="{name:'nucleicchoice'}" style="text-decoration: none">核酸检测</router-link>
            </el-menu-item>
            <el-menu-item index="1" class="menu">
                <router-link :to="{name:'login'}" style="text-decoration: none">重新登录</router-link>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>

export default {
    name: "AppHeader",
    data() {
        return {
            imgs: [
                {imgUrl: require('../assets/images/picture1.jpg')}
            ],
            url1: require('../assets/images/picture1.jpg'),
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            searchInfo: "",

        }
    },
    components: {

    },
    methods: {
        search() {
            this.$message({
                message: "前面的区域以后再来探索吧！",
                type: "success",
                duration: 1500
            })
        },
        toProfile() {
            this.$router.push({
                name: "login",
                params: {account: this.account, password: this.password},
            });
        }
    }
};
</script>

<style scoped>
ul > li {
    width: 12.5%;
    margin: 0 auto;
}

.menuChange > ul > li {
    color: black;
}

.profile:hover {
    cursor: pointer;
}

</style>
